<template>
  <div>
    <div class="head">
      <headerCommod/>
    </div>
    <div v-if="!$store.state.isLogin" class="forest-shipping to-top">
      <h1>登录到Forest Shipping</h1>
      <br/>
      <el-form ref="form" :model="form" :rules="rules" @submit.native.prevent>
        <el-form-item label="" prop="username">
          <label prop="username">邮箱/账号/手机号</label>
          <div class="input-item">
            <div class="icon">
              <img src="../assets/images/user.png" alt="">
            </div>
            <div class="input">
              <input type="text" v-model="form.username">
            </div>
          </div>
        </el-form-item>
        <el-form-item label="" prop="password">
          <div class="form-item">
            <label >请输入密码</label>
            <div class="input-item">
              <div class="icon">
                <img src="../assets/images/password.png" alt="">
              </div>
              <div class="input">
                <input type="password" v-model="form.password">
              </div>
            </div>
          </div>
        </el-form-item>
        <p>忘记密码?</p>
        <button class="login"  @click="login('form')">登录</button>
      </el-form>
      <p @click="$router.push('/register')" class="center">立即注册</p>
    </div>
    <div class="banner">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item>
          <img ref="imgHeight" src="../assets/images/banner.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/images/banner.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/images/banner.jpg" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="container cl">
      <h1 class="title">视频</h1>
      <div class="video-group">
        <div
          @mouseover="videoShow = 0"
          :class="['video-item', 'video1', 'to-top', videoShow == 0 ? 'video-active' : 'video-disappear']">
          <div class="video-img"></div>
          <p>FBA海运费用暴涨</p>
          <span>点击查看..</span>
        </div>
        <div
          @mouseover="videoShow = 1"
          :class="['video-item', 'video2', 'to-top', videoShow == 1 ? 'video-active' : 'video-disappear']">
          <div class="video-img"></div>
          <p>FBA海运费用暴涨</p>
          <span>点击查看..</span>
        </div>
        <div
          @mouseover="videoShow = 2"
          :class="['video-item', 'video3', 'to-top', videoShow == 2 ? 'video-active' : 'video-disappear']">
          <div class="video-img"></div>
          <p>FBA海运费用暴涨</p>
          <span>点击查看..</span>
        </div>
      </div>
    </div>
    <div class="container" style="margin: 100px auto 50px auto;">
      <video width="100%" height="472" controls="controls" autoplay="autoplay">
        <source src="/i/movie.ogg" type="video/ogg" />
        <source src="/i/movie.mp4" type="video/mp4" />
        <source src="/i/movie.webm" type="video/webm" />
        <object data="/i/movie.mp4" width="320" height="240">
          <embed width="320" height="240" src="/i/movie.swf" />
        </object>
      </video>
    </div>
    <div class="container cl">
      <h1 class="title">文章</h1>
      <div class="article-group">
        <div class="article-item article-item1 to-top">
        </div>
        <div class="article-item to-top">

          <h3>大森林动态</h3>
          <p>关于大森林动流英国货柜在...</p>
          <span>阅读更多>></span>
        </div>
        <div class="article-item article-item2 to-top">
        </div>
        <div class="article-item to-top">
          <h3>报告资讯</h3>
          <p>亚马逊FBA当中的产品尺寸标准...</p>
          <span>阅读更多>></span>
        </div>
        <div class="article-item article-item3 to-top">
        </div>
        <div class="article-item to-top">
          <h3>放假通知</h3>
          <p>2021年春节截货时间与放假安排</p>
          <span>阅读更多>></span>
        </div>
        <div class="article-item article-item4 to-top">
        </div>
        <div class="article-item to-top">
          <h3>喜报</h3>
          <p>大森林荣获“FBA物流十强企业”</p>
          <span>阅读更多>></span>
        </div>
        <div class="article-item article-item5 to-top">
        </div>
      </div>
    </div>
    <br/><br/>
    <footCommod/>
  </div>
</template>

<script>
  import headerCommod from '../components/Head'
  import footCommod from '../components/Bottom'

  import {login} from '@/api/user'

  export default {
    name: 'home',
    data () {
      const validateUname = (rule, value, callback) => {
        console.log(value)

        if (value.trim() === '') {
          callback(new Error('请输入用户名'));
        }
        callback();
      }
      const validatePass = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入密码'));
        }
        callback();
      }
      return {
        videoShow: 1,
        form: {
          username: '',
          password: '',
          type: '2'
        },
        rules: {
          username: [
            { validator: validateUname, trigger: 'blur' }
          ],
          password: [
            { validator: validatePass, trigger: 'blur' }
          ]
        },
      }
    },
    created () {
      console.log('cccc');
      //页面一加载就获取当前客户的id,暂时写死


    },
    mounted () {
    },
    components: {
      headerCommod,
      footCommod
    },
    methods: {
      /**
       ** 登录
       **/
      login (form) {
        console.log(12131)
        let Base64 = require('js-base64').Base64
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.form.password = Base64.encode(this.form.password);
            login(this.form).then(response => {
                if (response.success) {
                  // 登录成功保存登账号信息（包括token）
                  localStorage.setItem('FOREST_USER',JSON.stringify(response.result.userInfo))
                  //设置token
                  localStorage.setItem('FOREST_TOKEN',response.result.token);
                  // localStorage.setItem('FOREST_USER', response.data)
                  this.$store.state.isLogin = true
                  // 跳转
                  this.$router.push('/accountManagement')
                } else {
                  // 登录失败，弹出失败信息
                  this.$message({
                    message: response.message,
                    type: 'error'
                  })
                  this.form.password = Base64.decode(this.form.password);
                }
              }
            ).catch(err=>{
              this.$message.error(err.message);
              this.form.password = Base64.decode(this.form.password);
            })
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>

  input:focus {
    border: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  .head {
    z-index: 999;
    width: 100%;
    height: 97px;
  }

  .forest-shipping {
    position: absolute;
    width: 500px;
    left: calc(50% - 250px);
    z-index: 99;
    top: 200px;
  }

  .title {
    line-height: 150px;
    color: #44a148;
    text-align: center;
    margin-top: 50px;
  }

  .login {
    width: 100%;
    color: #fff;
    font-size: 20px;
    margin: 20px 0;
    font-weight: bold;
    background: none;
    border: 1px solid #fff;
    line-height: 40px;
    cursor: pointer;
  }

  .login:hover {
    background: #fff;
    color: #44a148;
  }

  .forest-shipping {
    color: #fff;
  }

  .forest-shipping h1 {
    margin-bottom: 20px;
    line-height: 40px;
  }

  .marbotom {
    margin-bottom: 20px;
  }

  .form-item label {
    line-height: 35px;
    display: block;
  }

  .input-item {
    border: 1px solid #fff;
    /*border-radius: 4px;*/
    height: 42px;
    overflow: hidden;
  }

  .input-item .icon {
    width: 50px;
    float: left;
  }

  .input-item .input {
    width: calc(100% - 50px);
    float: left;

  }
  .input-item input {
    border: none;
    background: none;
    height: 40px;
    width: 100%;
    color: #fff;
    outline: none;
  }

  .video-item,.article-item {
    width: 33.33%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
  }

  .video-item {
    height: 410px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }

  .article-item {
    height: 284px;
  }

  .article-item img {
    max-width: 100%;
  }

  .video-item img {
    width: 56px;
  }

  .video-item p {
    line-height: 60px;
  }

  .article-item p,.article-item h3 {
    margin-bottom: 20px;
  }

  .video-item span,.article-item span {
    color: #44a148;
    font-size: 12px;
    cursor: pointer;
  }

  .video-active,.video-active span {
    color: #fff;
  }

  .video-img {
    width: 56px;
    height: 53px;
    background: no-repeat center center;
    background-size: cover;
  }

  .video1 .video-img {
    background-image: url("../assets/images/video1-g.png");
  }

  .video2 .video-img {
    background-image: url("../assets/images/video2-g.png");
  }

  .video3 .video-img {
    background-image: url("../assets/images/video3-g.png");
  }

  .video-item:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 410px;
    background-size: 110% 110%;
    z-index: -1;
    opacity: 0;
  }

  .video1:after {
    background: url("../assets/images/video2-bg.jpg") no-repeat center center;
  }

  .video2:after {
    background: url("../assets/images/video2-bg.jpg") no-repeat center center;
  }

  .video3:after {
    background: url("../assets/images/video2-bg.jpg") no-repeat center center;
  }

  .video-active:after {
    animation: narrow 1s;
    -webkit-animation: narrow 1s; /* Safari 与 Chrome */
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }


  .video-disappear:after  {
    animation: disappear .5s;
    -webkit-animation: disappear .5s; /* Safari 与 Chrome */
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }


  .video1.video-active .video-img{
    background-image: url("../assets/images/video1.png");
  }

  .video2.video-active .video-img{
    background-image: url("../assets/images/video2.png");
  }

  .video3.video-active .video-img{
    background-image: url("../assets/images/video3.png");
  }

  @keyframes disappear
  {
    from {
      background-size: 110% 110%;
      opacity: 1;
    }
    to {
      background-size: 100% 100%;
      opacity: 0;
    }
  }

  @-webkit-keyframes disappear /* Safari 与 Chrome */
  {
    from {
      background-size: 110% 110%;
      opacity: 1;
    }
    to {
      background-size: 100% 100%;
      opacity: 0;
    }
  }


  @keyframes narrow
  {
    from {
      background-size: 100% 100%;
      opacity: 0;
    }
    to {
      background-size: 110% 110%;
      opacity: 1;
    }
  }

  @-webkit-keyframes narrow /* Safari 与 Chrome */
  {
    from {
      background-size: 100% 100%;
      opacity: 0;
    }
    to {
      background-size: 110% 110%;
      opacity: 1;
    }
  }

  @keyframes enlarge
  {
    from {
      background-size: 100% 100%;
    }
    to {
      background-size: 110% 110%;
    }
  }

  @-webkit-keyframes enlarge /* Safari 与 Chrome */
  {
    from {
      background-size: 100% 100%;
    }
    to {
      background-size: 110% 110%;
    }
  }

  .article-item1 {
    background: url("../assets/images/article1.jpg") no-repeat center center;
    background-size: 100% 100%;
  }

  .article-item2 {
    background: url("../assets/images/article2.jpg") no-repeat center center;
    background-size: 100% 100%;
  }

  .article-item3 {
    background: url("../assets/images/article3.jpg") no-repeat center center;
    background-size: 100% 100%;
  }

  .article-item4 {
    background: url("../assets/images/article4.jpg") no-repeat center center;
    background-size: 100% 100%;
  }

  .article-item5 {
    background: url("../assets/images/article5.jpg") no-repeat center center;
    background-size: 100% 100%;
  }

  .article-item:hover {
    animation: enlarge 1s;
    -webkit-animation: enlarge 1s; /* Safari 与 Chrome */
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

</style>

<style>
  .el-carousel__container {
    position: relative;
    height: calc(100vh - 97px) !important;
  }

  .el-carousel__container img {
    width: 100%;
    height: calc(100vh - 97px) !important;
  }

  .banner .el-carousel--horizontal {
    /*z-index: -1;*/
  }
</style>
